﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-ui-1.9.0.custom/js/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="jquery-jtemplates_uncompressed.js" type="text/javascript"></script>

    <style type="text/css">
		.jTemplatesTest {
			background: #DDD;
			border: 1px solid #000;
			margin: 2em;
			width: 480px;
			height:500px;
		}
		.jTemplatesTest * {
			padding: 4px;
			margin: 2px auto;
		}
		.jTemplatesTest td,tr {
			background: #EEE;
			border: 1px solid black;
		}
	</style>
</head>
<body>
    <p style="display: none">
        <textarea id="template" rows="0" cols="0">
        <!--
        <strong>{$T.name}: {$T.list_id}</strong>
		<table>
			{#foreach $T.table as record}
			<tr>
					<td>{$T.record.name}</td>
					<td>{$T.record.mail}</td>
                    <td>{$T.record.age}</td>
			</tr>
			{#/for}
		</table>
        -->
        </textarea>
    </p>
    <!-- Output elements -->
	<div id="result" class="jTemplatesTest"></div>
    <script type="text/javascript">
        var data = {
            name: 'User list',
            list_id: 4,
            table: [
  { id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com' },
  { id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com' },
  { id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com' },
  { id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com' },
  { id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com' }
 ]
        };

        $("#result").setTemplateElement("template");

        $("#result").processTemplate(data);
    </script>
</body>
</html>
